<template>
	<div style='background: #fff'>
		<div class='content-title'>表权限管理</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' @click='addGroup'>创建表权限</button>
			<div style="padding:1px">
				<Table :columns="groupList" :data="groupData" stripe></Table>
			</div>
		</div>
		<!-- 创建分组 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>{{dataId?'编辑表权限':'创建表权限'}}</span>
            </p>
            <div>
               <Form :label-width='75'>
               		<FormItem label='分组'>
                        <p slot='label'><span class='star'>*</span>分组</p>
                        <Select v-model='formItem.class_id'>
                            <Option v-for="item in configData.group" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label='数据表'>
                    	<p slot='label'><span class='star'>*</span>数据表</p>
                        <Select v-model='formItem.table'>
                            <Option v-for="item in configData.table" :value="item.Name" :key="item"></Option>
                            <Option value="baas.file"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label='权限'>
				    	<Checkbox v-model='formItem.fetch' class='auth-checkbox'>查询</Checkbox>
				        <Checkbox v-model='formItem.add' class='auth-checkbox'>新增</Checkbox>
				        <Checkbox v-model='formItem.update' class='auth-checkbox'>更新</Checkbox>
				        <Checkbox v-model='formItem.del' class='auth-checkbox'>删除</Checkbox>
                    </FormItem>
                    <FormItem label='密钥'>
                        <Select v-model='formItem.auth_id'>
                            <Option value="">请选择</Option>
                            <Option v-for="item in configData.auth" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				groupList: [
                    {
                        title: '分组',
                        key: 'class',
                        render: (h, params) => {
                            return h('span', params.row.class.name)
                        }
                    },
                    {
                        title: '数据表',
                        key: 'table',
                    },
                    {
                    	title:'权限',
                    	key:'auth',
                        width:130,
                        render: (h, params) => {
                            let styleObj = {
                                padding:'2px 5px',
                                borderRadius:'4px',
                                background:'#06a0fd',
                                color: '#fff',
                                marginRight:'10px',
                                marginTop:'10px',
                                float:'left'
                            }
                            let arr = [];
                            if(params.row.fetch==1){
                                arr.push(h('div',{style:styleObj},'查询'))
                            }
                            if(params.row.add==1){
                                arr.push(h('div',{style:styleObj},'新增'))
                            }
                            if(params.row.update==1){
                                arr.push(h('div',{style:styleObj},'更新'))
                            }
                            if(params.row.delete==1){
                                arr.push(h('div',{style:styleObj},'删除'))
                            }
                            return h('div',{style:{overflow:'hidden',paddingBottom:'10px'}}, arr);
                        }
                    },
                    {
                        title: '秘钥',
                        key: 'secret',
                        render: (h, params) => {
                            if(params.row.auth){
                                return h('span', params.row.auth.name)
                            }
                            
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'created_at',
                        width:160,
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                        }
                    },
                     {
                        title: '更新时间',
                        key: 'updated_at',
                        width:160,
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:110,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                groupData: [],
                dataId:0,
                configData:{},
                formItem:{
                    class_id:'',
                    table:'',
                    fetch:false,
                    add:false,
                    update:false,
                    del:false,
                    auth_id:0
                },
			}
		},
		created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            //数据表
            this.fetch('/home/app/auth/info/class/table').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
        methods:{
            getData(){
                this.fetch('/home/app/auth/class/table').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.groupData = res.data.data;
                    }
                })
            },
            //创建密钥
            addGroup(){
                this.modal = true;
                this.dataId = 0;
                this.formItem = {}
            },
            cancel(){
                this.modal = false;
            },
            sure(){
                if(!this.formItem.class_id){
                    this.$Message.warning('请选择分组')
                    return;
                }
                if(!this.formItem.table){
                    this.$Message.warning('请选择数据表')
                    return;
                }
               let data = {
               		class_id:this.formItem.class_id,
                    table:this.formItem.table,
                    fetch:this.formItem.fetch?1:0,
                    add:this.formItem.add?1:0,
                    update:this.formItem.update?1:0,
                    del:this.formItem.del?1:0,
                    auth_id:this.formItem.auth_id ? this.formItem.auth_id : 0
               }
                if(this.dataId){
                    data.id = this.dataId;
                }
                this.fetch('/home/app/auth/add/class/table',data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success(this.dataId?'编辑成功':'新增成功')
                        this.getData();
                        this.modal = false;
                    }
                })
            },
            edit(row){
                this.dataId = row.id;
                this.modal = true;
                this.fetch('/home/app/auth/class/table/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.formItem = res.data.data;
                        this.formItem.fetch = res.data.data.fetch?true:false;
                        this.formItem.add = res.data.data.add?true:false;
                        this.formItem.update = res.data.data.update?true:false;
                        this.formItem.del = res.data.data.delete?true:false;
                        this.formItem.auth_id = this.formItem.auth_id == 0 ? '' : this.formItem.auth_id;
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/auth/del/class/table/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
                
            }
        }
	}
</script>
<style type="text/css">
     .auth-checkbox .ivu-checkbox{
        margin-right: 4px;
     }
     .auth-checkbox.ivu-checkbox-wrapper{
        margin-right: 14px;
     }
</style>
